<template>
  <div class="home">
    <!--<div class="title-bar">-->
      <!--<div class="title">积分管理</div>-->
    <!--</div>-->
    <img class="logo" src="../assets/logo.png">
    <input class="edt-account" placeholder="请输入账号" v-model="account" v-on:input="watchAccount"/>
    <input class="edt-password" placeholder="请输入密码" v-model="password" v-on:input="watchPaasword" type="password"/>
    <div class="forgrt-password" @click="changePassword">忘记密码</div>
    <div class="login-active" @click="gotoLogin" v-show="canLogin">登录</div>
    <div class="login" @click="gotoLogin" v-show="!canLogin">登录</div>
    <DialogWindow
      v-if="isDialogShow"
      :content="errmsg"
      showbtncode="1"
      :onCloseClick="onDialogCloseClick"/>
  </div>
</template>

<style>

  body{
    margin: 0;
  }
  .title-bar{
    width: 100%;
    height: 44px;
    background:linear-gradient(360deg,rgba(44,45,49,1) 0%,rgba(16,16,19,1) 100%);
  }
  .title{
    font-size:18px;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:rgba(255,255,255,1);
    line-height:44px;
    text-align: center;
  }
  input{
    display: block;
    border: 0;
    outline: none;
  }
  .logo{
    width: 161px;
    height: 95px;
    margin: 0 auto;
    margin-top: 52px;
    display: block;
  }
  .edt-account{
    width:187px;
    height:48px;
    padding-left: 24px;
    padding-right: 24px;
    border-radius:100px;
    border:1px solid;
    margin: 0 auto;
    margin-top: 56px;
    font-size:16px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(75,79,87,1);
    line-height:48px;

  }
  .edt-password{
    width:187px;
    height:48px;
    padding-left: 24px;
    padding-right: 24px;
    border-radius:100px;
    border:1px solid;
    margin: 0 auto;
    margin-top: 16px;
    font-size:16px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(75,79,87,1);
    line-height:48px;
  }
  .login{
    width:235px;
    height:48px;
    background:rgba(225,225,225,1);
    border-radius:100px;
    margin: 0 auto;
    margin-top: 32px;
    font-size:18px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height:48px;
    text-align: center;
  }
  .forgrt-password{
    width:235px;
    height:20px;
    margin: 0 auto;
    margin-top: 8px;
    font-size:14px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(164,164,164,1);
    line-height:20px;
    text-align: right;
  }
  .login-active{
    width:235px;
    height:48px;
    background:rgba(254,108,136,1);
    border-radius:100px;
    margin: 0 auto;
    margin-top: 32px;
    font-size:18px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height:48px;
    text-align: center;
  }
</style>

<script>
  import {login} from '@/api/api'
  import DialogWindow from '@/components/DialogWindow'
export default {
  data(){
    return {
      account: '',
      password: '',
      canLogin: false,
      isDialogShow:false,
      errmsg:null
    }
  },
  created(){
    if (window.localStorage.getItem('token') && window.localStorage.getItem('token')!= null ){
      this.$router.push({path: '/wawaaction'})
    }
    if (window.localStorage.getItem('account') && window.localStorage.getItem('account')!= null ){
      this.account = window.localStorage.getItem('account')
    }

    if (window.localStorage.getItem('password') && window.localStorage.getItem('password')!= null ){
      this.password = window.localStorage.getItem('password')
    }

    if (this.account.length > 0 && this.password.length > 0){
      this.canLogin = true
    }
  },
  components:{
    DialogWindow
  },
  methods:{
    gotoLogin(){
      if (!this.canLogin){
        return
      }
      let params = {
        username: this.account,
        password: this.password

      }
      login(params).then(res=>{
        if (res.code == 0){
          window.localStorage.setItem('token',res.token)
          window.localStorage.setItem('account',this.account)
          window.localStorage.setItem('password',this.password)
          this.$router.push({path: '/wawaaction'});
        }else {
           this.isDialogShow = true;
           this.errmsg=res.message
        }
      })

    },
    watchAccount(){
        if (this.account.length > 0&& this.password.length>0){
          this.canLogin = true
        }else{
          this.canLogin = false
        }
    },
    watchPaasword(){
      if (this.account.length > 0&& this.password.length>0){
        this.canLogin = true
      }else{
        this.canLogin = false
      }
    },
    changePassword(){
      this.$router.push({path: '/changepassword'});
    },
    onDialogCloseClick () {
      this.isDialogShow=false;

    }
  }

}
</script>
